<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>맛집 세상 관리자</title>


    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"/>


    <link href="css/libs/font-awesome.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/libs/nanoscroller.css" type="text/css"/>

    <link rel="stylesheet" type="text/css" href="css/compiled/layout.css">
    <link rel="stylesheet" type="text/css" href="css/compiled/elements.css">

    <link rel="stylesheet" href="css/libs/fullcalendar.css" type="text/css"/>
    <link rel="stylesheet" href="css/libs/fullcalendar.print.css" type="text/css" media="print"/>
    <link rel="stylesheet" href="css/compiled/calendar.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/libs/morris.css" type="text/css"/>
    <link rel="stylesheet" href="css/libs/daterangepicker.css" type="text/css"/>
    <link rel="stylesheet" href="css/libs/jquery-jvectormap-1.2.2.css" type="text/css"/>

    <link type="image/x-icon" href="favicon.png" rel="shortcut icon"/>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400'
          rel='stylesheet' type='text/css'>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    
</head>
<body>

<%-- 상 단 --%>
<jsp:include page="include/top.jsp"></jsp:include>
<%-- 상 단 끝 --%>

<div id="content-wrapper">
<div class="row">
<div class="col-lg-12">
<div class="row">
    <div class="col-lg-12">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li class="active"><span>Main</span></li>
        </ol>
        <h1>메 인 화 면</h1>
    </div>
</div>
<div class="row">
    <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="main-box infographic-box">
            <i class="fa fa-user red-bg"></i>
            <span class="headline">회 원 수</span>
            <span class="value">2.562</span>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="main-box infographic-box">
            <i class="fa fa-globe emerald-bg"></i>
            <span class="headline">게 시 글</span>
            <span class="value">658</span>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="main-box infographic-box">
            <i class="fa fa-eye yellow-bg"></i>
            <span class="headline">방 문 자 수</span>
            <span class="value">12.526</span>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-9 col-lg-10">
        <div class="main-box">
            <div class="row">
                <div class="col-md-9">
                    <div class="graph-box emerald-bg">
                        <h2>메인 그래프</h2>

                        <div class="graph" id="graph-line" style="max-height: 335px;"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row graph-nice-legend">
                        <div class="graph-legend-row col-md-12 col-sm-4">
                            <div class="graph-legend-row-inner">
<span class="graph-legend-name">
회원수
</span>
<span class="graph-legend-value">
2.562
</span>
                            </div>
                        </div>
                        <div class="graph-legend-row col-md-12 col-sm-4">
                            <div class="graph-legend-row-inner">
<span class="graph-legend-name">
게시글
</span>
<span class="graph-legend-value">
658
</span>
                            </div>
                        </div>
                        <div class="graph-legend-row col-md-12 col-sm-4">
                            <div class="graph-legend-row-inner">
<span class="graph-legend-name">
방문자수
</span>
<span class="graph-legend-value">
12.526
</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-lg-2">
        <div class="social-box-wrapper">
            <div class="social-box col-md-12 col-sm-4 facebook">
                <i class="fa fa-facebook"></i>

                <div class="clearfix">
                    <span class="social-count">184k</span>
                    <span class="social-action">likes</span>
                </div>
                <span class="social-name">facebook</span>
            </div>
            <div class="social-box col-md-12 col-sm-4 twitter">
                <i class="fa fa-twitter"></i>

                <div class="clearfix">
                    <span class="social-count">49k</span>
                    <span class="social-action">tweets</span>
                </div>
                <span class="social-name">twitter</span>
            </div>
            <div class="social-box col-md-12 col-sm-4 google">
                <i class="fa fa-google-plus"></i>

                <div class="clearfix">
                    <span class="social-count">204</span>
                    <span class="social-action">circles</span>
                </div>
                <span class="social-name">google+</span>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="main-box clearfix">
            <header class="main-box-header clearfix">
                <h2 class="pull-left">새 게시글</h2>

                <div class="filter-block pull-right">
                    <div class="form-group pull-left">
                        <input type="text" class="form-control" placeholder="찾기...">
                        <i class="fa fa-search search-icon"></i>
                    </div>
                    <a href="#" class="btn btn-primary pull-right">
                        <i class="fa fa-eye fa-lg"></i> 전체 글
                    </a>
                </div>
            </header>
            <div class="main-box-body clearfix">
                <div class="table-responsive clearfix">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th><a href="#"><span>아이디</span></a></th>
                            <th><a href="#" class="desc"><span>날 짜</span></a></th>
                            <th><a href="#" class="asc"><span>지 역</span></a></th>
                            <th class="text-center"><span>제 목</span></th>
                            <th class="text-right"><span>조회수</span></th>
                            <th>&nbsp;</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <a href="#">#8002</a>
                            </td>
                            <td>
                                2013/08/08
                            </td>
                            <td>
                                <a href="#">서울</a>
                            </td>
                            <td class="text-center">
                               강남역 왕 갈비탕
                            </td>
                            <td class="text-right">
                                12
                            </td>
                            <td class="text-center" style="width: 15%;">
                                <a href="#" class="table-link">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
</span>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">#5832</a>
                            </td>
                            <td>
                                2013/08/08
                            </td>
                            <td>
                                <a href="#">서울</a>
                            </td>
                            <td class="text-center">
                                신촌 서서 갈비
                            </td>
                            <td class="text-right">
                                5
                            </td>
                            <td class="text-center" style="width: 15%;">
                                <a href="#" class="table-link">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
</span>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">#2547</a>
                            </td>
                            <td>
                                2013/08/08
                            </td>
                            <td>
                                <a href="#">전주</a>
                            </td>
                            <td class="text-center">
                                전주 최고 맛집 비빔밥
                            </td>
                            <td class="text-right">
                                12
                            </td>
                            <td class="text-center" style="width: 15%;">
                                <a href="#" class="table-link">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
</span>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">#9274</a>
                            </td>
                            <td>
                                2013/08/08
                            </td>
                            <td>
                                <a href="#">부산</a>
                            </td>
                            <td class="text-center">
                                매운 부산어묵 짱
                            </td>
                            <td class="text-right">
                                7
                            </td>
                            <td class="text-center" style="width: 15%;">
                                <a href="#" class="table-link">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
</span>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">#8463</a>
                            </td>
                            <td>
                                2013/08/08
                            </td>
                            <td>
                                <a href="#">제주도</a>
                            </td>
                            <td class="text-center">
                                제주도에서 만 맛볼수 있는 고등어회
                            </td>
                            <td class="text-right">
                                3
                            </td>
                            <td class="text-center" style="width: 15%;">
                                <a href="#" class="table-link">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
</span>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="main-box">
            <div class="main-box-body clearfix">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
<div class="col-lg-6">
<div class="main-box clearfix">
<div class="tabs-wrapper tabs-no-header">
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab-users" data-toggle="tab">회 원</a></li>
    <li><a href="#tab-products" data-toggle="tab">게 시 글</a></li>
</ul>
<div class="tab-content tab-content-body clearfix">
<div class="tab-pane fade in active" id="tab-users">
    <ul class="widget-users row">
        <li class="col-md-6">
            <div class="img">
                <img src="img/samples/scarlet.png" alt=""/>
            </div>
            <div class="details">
                <div class="name">
                    <a href="#">Scarlett Johansson</a>
                </div>
                <div class="time">
                    <i class="fa fa-clock-o"></i> 마지막 접속: 5 분전
                </div>
                <div class="type">
                    <span class="label label-danger">관리자</span>
                </div>
            </div>
        </li>
        <li class="col-md-6">
            <div class="img">
                <img src="img/samples/kunis.png" alt=""/>
            </div>
            <div class="details">
                <div class="name">
                    <a href="#">Mila Kunis</a>
                </div>
                <div class="time online">
                    <i class="fa fa-check-circle"></i> 접속중
                </div>
                <div class="type">
                    <span class="label label-warning">게시판 관리</span>
                </div>
            </div>
        </li>
        <li class="col-md-6">
            <div class="img">
                <img src="img/samples/ryan.png" alt=""/>
            </div>
            <div class="details">
                <div class="name">
                    <a href="#">Ryan Gossling</a>
                </div>
                <div class="time online">
                    <i class="fa fa-check-circle"></i> 접속중
                </div>
            </div>
        </li>
        <li class="col-md-6">
            <div class="img">
                <img src="img/samples/robert.png" alt=""/>
            </div>
            <div class="details">
                <div class="name">
                    <a href="#">Robert Downey Jr.</a>
                </div>
                <div class="time">
                    <i class="fa fa-clock-o"></i> 마지막 접속: 어제
                </div>
            </div>
        </li>
        <li class="col-md-6">
            <div class="img">
                <img src="img/samples/emma.png" alt=""/>
            </div>
            <div class="details">
                <div class="name">
                    <a href="#">Emma Watson</a>
                </div>
                <div class="time">
                    <i class="fa fa-clock-o"></i> 마지막 접속: 1달 전
                </div>
            </div>
        </li>
        <li class="col-md-6">
            <div class="img">
                <img src="img/samples/george.png" alt=""/>
            </div>
            <div class="details">
                <div class="name">
                    <a href="#">George Clooney</a>
                </div>
                <div class="time">
                    <i class="fa fa-clock-o"></i> 마지막 접속: 1달 전
                </div>
            </div>
        </li>
        <li class="col-md-6">
            <div class="img">
                <img src="img/samples/kunis.png" alt=""/>
            </div>
            <div class="details">
                <div class="name">
                    <a href="#">Mila Kunis</a>
                </div>
                <div class="time online">
                    <i class="fa fa-check-circle"></i> 접속중
                </div>
                <div class="type">
                    <span class="label label-warning">게시판 관리</span>
                </div>
            </div>
        </li>
        <li class="col-md-6">
            <div class="img">
                <img src="img/samples/ryan.png" alt=""/>
            </div>
            <div class="details">
                <div class="name">
                    <a href="#">Ryan Gossling</a>
                </div>
                <div class="time online">
                    <i class="fa fa-check-circle"></i> 접속중
                </div>
            </div>
        </li>
    </ul>
    <br/>
    <a href="#" class="btn btn-success pull-right">전체 회원</a>
</div>
<div class="tab-pane fade" id="tab-products">
    <ul class="widget-products">
        <li>
            <a href="#">
<span class="img">
<img src="img/samples/emma.png" alt=""/>
</span>
<span class="product clearfix">
<span class="name">
게시글 mini 32GB WiFi Black&Slate
</span>
</span>
            </a>
        </li>
        <li>
            <a href="#">
<span class="img">
<img src="img/samples/emma.png" alt=""/>
</span>
<span class="product clearfix">
<span class="name">
게시글 mini 16GB WiFi Black&Slate
</span>
</span>
            </a>
        </li>
        <li>
            <a href="#">
<span class="img">
<img src="img/samples/emma.png" alt=""/>
</span>
<span class="product clearfix">
<span class="name">
게시글 mini 32GB WiFi Cellular Black&Slate
</span>
</span>
            </a>
        </li>
        <li>
            <a href="#">
<span class="img">
<img src="img/samples/emma.png" alt=""/>
</span>
<span class="product clearfix">
<span class="name">
게시글 mini 32GB WiFi Cellular Black&Slate
</span>
</span>
            </a>
        </li>
    </ul>
    <br/>
    <a href="#" class="btn btn-success pull-right">전체 글</a>
</div>
<div class="tab-pane fade" id="tab-todo">
    <ul class="widget-todo">
        <li class="clearfix">
            <div class="name">
                <div class="checkbox-nice">
                    <input type="checkbox" id="todo-1"/>
                    <label for="todo-1">
                        New products introduction <span class="label label-danger">High Priority</span>
                    </label>
                </div>
            </div>
        </li>
        <li class="clearfix">
            <div class="name">
                <div class="checkbox-nice">
                    <input type="checkbox" id="todo-2"/>
                    <label for="todo-2">
                        Checking the stock <span class="label label-success">Low Priority</span>
                    </label>
                </div>
            </div>
            <div class="actions">
                <a href="#" class="table-link">
                    <i class="fa fa-pencil"></i>
                </a>
                <a href="#" class="table-link danger">
                    <i class="fa fa-trash-o"></i>
                </a>
            </div>
        </li>
        <li class="clearfix">
            <div class="name">
                <div class="checkbox-nice">
                    <input type="checkbox" id="todo-3" checked="checked"/>
                    <label for="todo-3">
                        Buying coffee <span class="label label-warning">Medium Priority</span>
                    </label>
                </div>
            </div>
            <div class="actions">
                <a href="#" class="table-link">
                    <i class="fa fa-pencil"></i>
                </a>
                <a href="#" class="table-link danger">
                    <i class="fa fa-trash-o"></i>
                </a>
            </div>
        </li>
        <li class="clearfix">
            <div class="name">
                <div class="checkbox-nice">
                    <input type="checkbox" id="todo-4"/>
                    <label for="todo-4">
                        New marketing campaign <span class="label label-success">Low Priority</span>
                    </label>
                </div>
            </div>
        </li>
        <li class="clearfix">
            <div class="name">
                <div class="checkbox-nice">
                    <input type="checkbox" id="todo-5"/>
                    <label for="todo-5">
                        Calling Mom <span class="label label-warning">Medium Priority</span>
                    </label>
                </div>
            </div>
            <div class="actions">
                <a href="#" class="table-link badge">
                    <i class="fa fa-cog"></i>
                </a>
            </div>
        </li>
        <li class="clearfix">
            <div class="name">
                <div class="checkbox-nice">
                    <input type="checkbox" id="todo-6"/>
                    <label for="todo-6">
                        Ryan's birthday <span class="label label-danger">High Priority</span>
                    </label>
                </div>
            </div>
        </li>
        <li class="clearfix">
            <div class="name">
                <div class="checkbox-nice">
                    <input type="checkbox" id="todo-7"/>
                    <label for="todo-7">
                        Printing new flyer <span class="label label-success">Low Priority</span>
                    </label>
                </div>
            </div>
        </li>
        <li class="clearfix">
            <div class="name">
                <div class="checkbox-nice">
                    <input type="checkbox" id="todo-8"/>
                    <label for="todo-8">
                        Mila and Ryan wedding <span class="label label-danger">High Priority</span>
                    </label>
                </div>
            </div>
        </li>
        <li class="clearfix">
            <div class="name">
                <div class="checkbox-nice">
                    <input type="checkbox" id="todo-9"/>
                    <label for="todo-9">
                        Checking the stock <span class="label label-success">Low Priority</span>
                    </label>
                </div>
            </div>
        </li>
    </ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%-- 하단 --%>
<jsp:include page="include/bottom.jsp"></jsp:include>
<%-- 하단 끝 --%>
</div>
</div>
</div>

<script type="text/javascript" src="js/demo-skin-changer.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="js/fullcalendar.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/morris.min.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/daterangepicker.js"></script>
<script type="text/javascript" src="js/jquery-jvectormap-1.2.2.min.js"></script>
<script type="text/javascript" src="js/jquery-jvectormap-world-merc-en.js"></script>
<script type="text/javascript" src="js/gdp-data.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.stack.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.time.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.threshold.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>


<script type="text/javascript">
$(document).ready(function () {

   


    /* initialize the calendar
     -----------------------------------------------------------------*/

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        header: {
            left: '',
            center: 'title',
            right: 'prev,next'
        },
        selectable: true,
        selectHelper: true,
        select: function (start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function (date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // copy label class from the event object
            var labelClass = $(this).data('eventclass');

            if (labelClass) {
                copiedEventObject.className = labelClass;
            }

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }

        },
        buttonText: {
            prev: '<i class="fa fa-chevron-left"></i>',
            next: '<i class="fa fa-chevron-right"></i>'
        },
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1),
                className: 'label-success'
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d - 5),
                end: new Date(y, m, d - 2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d - 3, 16, 0),
                allDay: false,
                className: 'label-danger'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d + 4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false,
                className: 'label-info'
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false,
                className: 'label-success'
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d + 1, 19, 0),
                end: new Date(y, m, d + 1, 22, 30),
                allDay: false,
                className: 'label-info'
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/',
                className: 'label-danger'
            }
        ]
    });

    $('.conversation-inner').slimScroll({
        height: '332px',
        alwaysVisible: false,
        railVisible: true,
        wheelStep: 5,
        allowPageScroll: false
    });

    //CHARTS
    graphLine = Morris.Line({
        element: 'graph-line',
        data: [
            {period: '2014-01-01', 회원수: 2666, 게시글: null, 방문자수: 2647},
            {period: '2014-01-02', 회원수: 9778, 게시글: 2294, 방문자수: 2441},
            {period: '2014-01-03', 회원수: 4912, 게시글: 1969, 방문자수: 2501},
            {period: '2014-01-04', 회원수: 3767, 게시글: 3597, 방문자수: 5689},
            {period: '2014-01-05', 회원수: 6810, 게시글: 1914, 방문자수: 2293},
            {period: '2014-01-06', 회원수: 5670, 게시글: 4293, 방문자수: 1881},
            {period: '2014-01-07', 회원수: 4820, 게시글: 3795, 방문자수: 1588},
            {period: '2014-01-08', 회원수: 15073, 게시글: 5967, 방문자수: 5175},
            {period: '2014-01-09', 회원수: 10687, 게시글: 4460, 방문자수: 2028},
            {period: '2014-01-10', 회원수: 8432, 게시글: 5713, 방문자수: 1791}
        ],
        lineColors: ['#2980b9', '#7f8c8d', '#27ae60', '#8e44ad', '#c0392b', '#f39c12'],
        xkey: 'period',
        ykeys: ['회원수','게시글','방문자수'],
        labels: ['회원수','게시글','방문자수'],
        pointSize: 3,
        hideHover: 'auto',
        gridTextColor: '#ffffff',
        gridLineColor: 'rgba(255, 255, 255, 0.3)',
        resize: true
    });

    //WORLD MAP
    $('#world-map').vectorMap({
        map: 'world_merc_en',
        backgroundColor: '#ffffff',
        zoomOnScroll: false,
        regionStyle: {
            initial: {
                fill: '#e1e1e1',
                stroke: 'none',
                "stroke-width": 0,
                "stroke-opacity": 1
            },
            hover: {
                "fill-opacity": 0.8
            },
            selected: {
                fill: '#8dc859'
            },
            selectedHover: {
            }
        },
        series: {
            regions: [
                {
                    values: gdpData,
                    scale: ['#6fc4fe', '#2980b9'],
                    normalizeFunction: 'polynomial'
                }
            ]
        },
        onRegionLabelShow: function (e, el, code) {
            el.html(el.html() + ' (' + gdpData[code] + ')');
        }
    });
});
</script>
</body>
</html>